<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css左侧弹出侧栏移开后收起</title>
		<link rel="stylesheet" href="index.css">
		<script src="index.js"></script>
		
	</head>
	<body>
		<div id="divdemo" class="demo">
			<span class="txt1">主屏内容</span>
			<!-- 歌单-->
			<div id="left_panel" class ="left_panel_out">
				<div class="song_row">
				<span id="s_lab1" class="s_col1">抽奖前奏</span>
				<span id="s_opr1" class="s_col2">
					<button id="sb_opr1" data-src="sound/game_running.mp3">播放</button>
				</span>
				</div>
				<div class="song_row">
				<span id="s_lab2" class="s_col1">抽奖开了</span>
				<span id="s_opr2" class="s_col2">
					<button id="sb_opr2" data-src="sound/get_reward.mp3">播放</button>
				</span>
				<audio id="audio1"><audio>
				</div>
			</div>
			<table class="tab_note">	
				<tr>
					<th>坐标参量</th><th>解释</th>
				</tr>
				<tr>
					<td>clientX</td><td>事件属性返回当事件被触发时鼠标指针相对于浏览器页面（或客户区）的水平坐标。</td>
				</tr>
				<tr>
					<td>clientY</td><td>事件属性返回当事件被触发时鼠标指针相对于浏览器页面（客户区）的垂直坐标。</td>
				</tr>
				<tr>
					<td>screenX</td><td>事件属性可返回事件发生时鼠标指针相对于屏幕的水平坐标。</td>
				</tr>
				<tr>
					<td>screenY</td><td>事件属性可返回事件发生时鼠标指针相对于屏幕的垂直坐标。</td>
				</tr>
				<tr>
					<td>offsetX</td><td>事件发生的地点在事件源元素的坐标系统中的 x 坐标(ie)。</td>
				</tr>
				<tr>
					<td>offsetY</td><td>事件发生的地点在事件源元素的坐标系统中的 y 坐标(ie)。</td>
				</tr>
				<tr>
					<td>x</td><td>事件发生的位置的 x 坐标, 它相对于用CSS动态定位的最内层包容元素(ie,~pageX)。</td>
				</tr>
				<tr>
					<td>y</td><td>事件发生的位置的 y 坐标, 它相对于用CSS动态定位的最内层包容元素(ie,~pageY)。</td>
				</tr>
				<tr>
					<td>pageX</td><td>鼠标指针的位置，相对于文档的左边缘(firefox,~x)。</td>
				</tr>
				<tr>
					<td>pageY</td><td>鼠标指针的位置，相对于文档的上边缘(firefox,~y)。</td>
				</tr>
				<tr>
					<td>layerX</td><td>鼠标相比较于当前坐标系的位置(firefox,~offsetX)。</td>
				</tr>
				<tr>
					<td>layerY</td><td>鼠标相比较于当前坐标系的位置(firefox,~offsetY)。</td>
				</tr>
				<tr>
					<td>trace</td> 
					<td><span id='c1'>0</span> 
					<span id='n1'>?</span>
					<span id='c2'>0</span>
					<span id='n2'>?</span>
					</td> 
				</tr>
			</table>
			<div class="txt2">
				<div class="row">
				<span id="r_txt0" class="col0">右屏内容,显示click坐标信息</span>
				</div>
				<div class="row">
				<span id="r_lab1" class="col1">clientX</span>
				<span id="r_txt1" class="col2">0</span>
				</div>
				<div class="row">
				<span id="r_lab2" class="col1">clientY</span>
				<span id="r_txt2" class="col2">0</span>
				</div>
				<div class="row">
				<span id="r_lab3" class="col1">screenX</span>
				<span id="r_txt3" class="col2">0</span>
				</div>
				<div class="row">
				<span id="r_lab4" class="col1">screenY</span>
				<span id="r_txt4" class="col2">0</span>
				</div>
				<div class="row">
				<span id="r_lab5" class="col1">offsetX</span>
				<span id="r_txt5" class="col2">0</span>
				</div>
				<div class="row">
				<span id="r_lab6" class="col1">offsetY</span>
				<span id="r_txt6" class="col2">0</span>
				</div>
				<div class="row">
				<span id="r_lab7" class="col1">x</span>
				<span id="r_txt7" class="col2">0</span>
				</div>
				<div class="row">
				<span id="r_lab8" class="col1">y</span>
				<span id="r_txt8" class="col2">0</span>
				</div>
				<div class="row">
				<span id="r_lab9" class="col1">pageX</span>
				<span id="r_txt9" class="col2">0</span>
				</div>
				<div class="row">
				<span id="r_labA" class="col1">pageY</span>
				<span id="r_txtA" class="col2">0</span>
				</div>
				<div class="row">
				<span id="r_labB" class="col1">layerX</span>
				<span id="r_txtB" class="col2">0</span>
				</div>
				<div class="row">
				<span id="r_labC" class="col1">layerY</span>
				<span id="r_txtC" class="col2">0</span>
				</div>
				<div class="row">
				<span id="r_labD" class="col1">lp-oX</span>
				<span id="r_txtD" class="col2">0</span>
				</div>
				<div class="row">
				<span id="r_labE" class="col1">lp-oY</span>
				<span id="r_txtE" class="col2">0</span>
				</div>
			</div>
			<!--
			<div id="left_nav">
				<ul>
					<li>手机<div class="pane">aaa</div></li>
					<li>平板<div class="pane">bbb</div></li>
					<li>电脑<div class="pane">ccc</div></li>
					<li>电视<div class="pane">ddd</div></li>
				</ul>
			</div>
			-->
		</div>
	</body>

</html>
